// 轮播图的实现


let iconLfte=doca('.icon-left')
let iconRight=doca('.banner-arr .icon-right')
let imgList=doca('.banner-img')
let circles =docall('.banner-disc li')

let index=0;


// 点击右按钮切换图片
// 设置节流锁
let lock =true;
function rota(){
    // 判断
    if(!lock) return;
    index++;
    imgList.style.left=index * -1226 +'px';
    imgList.style.transition='0.5s ease';
    if(index===4){
        index=0;
       setTimeout(()=>{
        
        imgList.style.left=0;
        imgList.style.transition='none'
       },500);
    } 
    setCircles()
    // 关锁
    lock= false;
    setTimeout(()=>{
        lock=true;
    },500)
}


iconRight.addEventListener('click',rota)

// 点击左边按钮切换图片
iconLfte.addEventListener('click',()=>{
    
      index--;
   if(index === -1){
    imgList.style.left=4 * -1226 +'px';
    imgList.style.transition='none';
    index=3;
    setTimeout(()=>{
        
    imgList.style.left=index * -1226 +'px'
    imgList.style.transition='0.5s ease';
    },0)
    
   }else{
       imgList.style.left=index * -1226 +'px'
   }
   setCircles()
   
} )
// 小圆点高亮显示
function setCircles(){
    
  for(let i=0;i<circles.length;i++){
      
      if(i===index){
          circles[i].classList.add("active")
      }else{
        circles[i].classList.remove("active")
      }
  }   
}


// 小圆点点击事件
doca('.banner-disc').addEventListener('click',(e)=>{
    // 判断点击的是不是li标签
    if(e.target.nodeName.toLowerCase()==='li'){
     let n=Number(e.target.getAttribute('data-n'))
     index = n;
     setCircles()
     imgList.style.left=index * -1226 +'px'
      
    }
})

// 自动轮播
let autoplay =setInterval(rota,1500)
// 移入暂停
imgList.addEventListener('mouseover',()=>{
   clearInterval(autoplay)
})
// 移出继续轮播
imgList.addEventListener('mouseout',()=>{
    clearInterval(autoplay)
    autoplay =setInterval(rota,1500)
})
// 获取节点方法
function doca (ele){
    return document.querySelector(ele)
}
function docall (ele){
    return document.querySelectorAll(ele)
   
}